<template>
  <div class="dashboard-container">
    <div style="display: flex; width: 100%" class="dashboard-header">
      <div>
        <span style="font-weight: bolder"
          >{{ obj.username }}您好,欢迎登录wangs集团平台</span
        >
      </div>
      <div style="margin: 0 0 0 5%; display: flex; align-item: center">
        <span style="font-weight: bolder"
          >海口今天气温：{{ local.temperature }}°C</span
        >
        <span style="margin: 0 5px 0; font-weight: bolder">天气情况：</span>
        <img
          v-if="local.text == '阴'"
          style="width: 20px; height: 20px"
          src="../../assets/img/yintian.png"
          alt=""
        />
        <img
          v-if="local.text == '多云'"
          style="width: 20px; height: 20px"
          src="../../assets/img/yintian.png"
          alt=""
        />
        <img
          v-if="local.text == '晴'"
          style="width: 20px; height: 20px"
          src="../../assets/img/yintian.png"
          alt=""
        />
      </div>
    </div>
    <div class="dashboard-main">
      <div class="dashboardLeft">
        <agencyView />
      </div>
      <div class="dashboardRight">
        <noticeView />
      </div>
    </div>
    <div class="dashboard-main">
      <div class="dashboardLeft">
        <projectView />
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import axios from "axios";
import agencyView from "./agencyView.vue";
import noticeView from "./noticeView.vue";
import projectView from "./projectView.vue";
export default {
  name: "Dashboard",
  computed: {
    ...mapGetters(["name"]),
  },
  components: {
    agencyView,
    noticeView,
    projectView,
  },
  data() {
    return {
      obj: {},
      local: {
        code: "",
        temperature: "",
        text: "",
      },
      listData: [
        {
          title: "请审批wangs商城项目",
          date: "2017-12-16",
        },
        {
          title: "请审批采购关于购买服务器1",
          date: "2017-12-16",
        },
        {
          title: "请审批采购关于购买服务器2",
          date: "2017-12-16",
        },
        {
          title: "请审批采购关于购买服务器3",
          date: "2017-12-16",
        },
        {
          title: "请审批采购关于购买服务器4",
          date: "2017-12-16",
        },
        {
          title: "请审批采购关于购买服务器5",
          date: "2017-12-16",
        },
      ],
      noticeData: [
        {
          title: "关于加强wangs集团员工自身素质",
          date: "2022-03-11",
        },
        {
          title: "关于xx任命通知",
          date: "2022-03-11",
        },
      ],
    };
  },
  created() {
    this.getInfo();
    this.getTem();
  },
  mounted() {
    this.changeText();
  },
  methods: {
    //getInfo
    getInfo() {
      this.$http
        .get("/user/Dashboard", {
          params: { username: this.$store.state.user.info.username },
        })
        .then((res) => {
          this.obj = res.data;
        });
    },
    //获取天气
    getTem() {
      axios
        .get(
          " https://api.seniverse.com/v3/weather/now.json?key=SJ8z3nMQDtzohYlOA&location=haikou&language=zh-Hans&unit=c"
        )
        .then((res) => {
          this.local = Object.assign(this.local, res.data.results[0].now);
        });
    },
    changeText() {
      var tslist = document.querySelectorAll(".dv-border-box-11-title");
      // ts.removeAttribute("fill");
      tslist.forEach((ele) => {
        ele.removeAttribute("fill");
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}

//scroll
// .warp {
//   height: 12vw;
//   width: 25vw;
//   overflow: hidden;
//   position: absolute;
//   left: 50%;
//   transform: translate(-50%, -40%);
//   ul {
//     list-style: none;
//     padding: 0;
//     margin: 0 auto;
//     li,
//     a {
//       display: block;
//       height: 30px;
//       line-height: 30px;
//       display: flex;
//       justify-content: space-between;
//       font-size: 15px;
//     }
//   }
// }
.border-box {
  width: 100%;
  padding: 10vw 0;
}

.border-box.one {
  width: 100%;
  padding: 5vw 0;
}
.dashboard-header {
  width: 100%;
  background-color: #fff;
  padding: 30px 20px;
  border-radius: 10px;
  box-shadow: 10px 10px 10px -10px black;
}
.dashboard-main {
  width: 100%;
  display: flex;
}
.dashboardLeft {
  width: 60%;
  border-radius: 10px;
  margin: 1vw 0 0;
  padding: 30px 20px 0;
  box-shadow: 10px 10px 10px -10px black;
  background-color: #fff;
  position: relative;
}
.warp {
  // height: 270px;
  width: 100%;
  margin: 20px 0;
  overflow: hidden;
  left: 0;
  transform: translate(0, 0) !important;
  ul {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    li,
    a {
      display: block;
      height: 30px;
      line-height: 30px;
      display: flex;
      justify-content: space-between;
      font-size: 15px;
    }
  }
}
.dashboardRight {
  width: 39%;
  border-radius: 10px;
  margin: 1vw 0 0 1vw;
  padding: 30px 20px 0;
  box-shadow: 10px 10px 10px -10px black;
  background-color: #fff;
}
</style>
